<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>导航栏设置</span>
        <el-button style="float: right" type="primary" @click="dialogFormVisible = true">添加导航</el-button>
      </div>
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          label="id"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="链接地址"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Link }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.AddTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row);dialogFormVisibleEdit = true">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    //添加导航栏-->
    <el-dialog title="添加导航栏" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.Title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.Link" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;addnavs()">确 定</el-button>
      </div>
    </el-dialog>

    <!--    //编辑导航栏-->
    <el-dialog title="编辑导航栏" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.Title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.Link" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleEdit = false;putNav()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getNavList, addNav, delNav, PutNav} from "@/api/nav"

export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      form: {
        Title: '',
        Link: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.form = row
    },
    handleDelete(index, row) {
      delNav(row.Id).then(con => {
        if (con.code) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        }
        this.getNav()
      })
      console.log(index, row);
    },
    getNav() {
      getNavList().then(con => {
        this.list = con.data
      })
    },
    addnavs() {
      addNav(this.form).then(con => {
        this.getNav()
      })
    },
    putNav() {
      PutNav(this.form).then(con => {
        this.getNav()
      })
    }
  },
  created() {
    this.getNav()
  }
}
</script>
